<template>
  <div class="child_wrapper" :class="[item.theme == 7 ? 'vipbgc' : '']">
    <div class="item_box">
      <div v-if="item?.primaryBadage" class="active_text">
        <div
          class="left overflowText"
          :class="[item.itemClass === 3 ? 'vipClass' : '']"
          v-if="item?.primaryBadage"
        >
          {{ item.primaryBadage }}
        </div>
        <div
          class="right overflowText"
          :class="[item.itemClass === 3 ? 'vipClass' : '']"
          v-if="item?.secondaryBadge"
        >
          {{ item.secondaryBadge }}
        </div>
      </div>
      <div class="item_main">
        <div class="price_box">
          <span class="item_price">
            <span style="margin-right: 4px; font-size: 28px">¥</span
            >{{ item?.total / 100 }}
          </span>
          <!-- <span class="item_gifts overflowText" v-if="item?.item1Data">
            {{ item.guidance }}
          </span> -->
        </div>
        <div class="disc">
          <!-- <template v-if="item.itemClass !== 3">
            <img src="@/assets/coin1.png" alt="" class="img" />
            <span>{{ item?.itemData }}</span> +
            <span>{{ item.item1Data }}赠币</span>
          </template> -->

          <span class="vip" v-if="item.guidance">{{ item.guidance }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
const { item } = toRefs(props);
</script>

<style scoped lang="scss">
.child_wrapper {
  width: 100%;
  height: 100%;
  background-color: #f6f7fb;
  border-radius: 10px;
  // background: url("https://theater-static-1320245876.cos.ap-guangzhou.myqcloud.com/static/pay/bg_orange.png");
  .item_box {
    position: relative;

    .active_text {
      // position: absolute;
      // top: -6px;
      // left: 0;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // padding: 4px 10px;
      // font-size: 11px;
      // line-height: normal;
      // color: #fff9c7;
      // // background: linear-gradient(to right, #fc8f2a, #fb7810);
      // background-color: #603809;
      // border-radius: 10px 0;

      position: relative;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 24px;
      line-height: 22px;

      div {
        position: absolute;
        top: -10px;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        max-width: 48%;
        height: 100%;
        padding: 2px 10px;
        font-size: 12px;
        color: #fff;
        background-color: #f53732;
      }

      .left {
        left: 0;
        border-radius: 14px 0;
      }

      .right {
        right: 0;
        border-radius: 0 14px;
      }

      .vipClass {
        font-weight: bold;
        color: #fff9c7;
        background: #603809;
      }
    }

    .item_main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2px 0 0 18px;

      .price_box {
        .item_price {
          font-size: 22px;
          font-weight: bold;
          color: #212121;
        }

        .item_gifts {
          display: inline-block;
          max-width: 100px;
          height: 22px;
          padding: 0 6px;
          margin-left: 2px;
          font-size: 11px;
          line-height: 22px;
          color: #c3735a;
          text-align: center;
          vertical-align: text-bottom;
          background-color: #ffebe4;
          border-radius: 11px;
        }
      }

      .disc {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #aaa;

        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
    }
  }
}

.vipbgc {
  // background-color: #ff6b01;
  background: url("@/assets/img/vip.png") no-repeat center;
  background-size: 100%;

  .item_box > .item_main > .price_box > .item_price {
    font-size: 32px;
    color: #fff;
  }

  .item_box > .item_main > .disc > .vip {
    padding: 3px 12px;
    font-size: 14px;
    line-height: normal;
    color: #e0431f;
    background-color: #ffecc9;
    border-radius: 5px;
    box-shadow: inset 0 -2px 4px #f6b89a;
  }
}

// .actbgc {
//   background-color: #fff1d7;
//   border-color: #fff1d7;
//   // background: url("https://theater-static-1320245876.cos.ap-guangzhou.myqcloud.com/static/pay/bg_grey.png");

//   .item_box > .item_main > .price_box > .item_price {
//     color: #f65a31;
//   }
// }
</style>
